import React, { Component } from 'react'
import {Col, Button, Tooltip} from 'antd'
import '../../less/index.less'
import {connect} from 'react-redux'
import * as excellentActions from '../../actions/excellent-assignment'
import { withRouter, Link } from 'react-router-dom'

class ReferenceButtonGroup extends Component {
  componentDidMount () {
    this.props.getExcellentOnlineCodingVideo(this.props.taskId, this.props.assignmentId)
  }

  goExcellentAssignmentList () {
    const { studentWebUrl } = this.props.settings
    const url = studentWebUrl + `/program/${this.props.programId}/task/${this.props.taskId}/assignment/${this.props.assignmentId}/quiz/${this.props.quizId}/excellent-quiz-list`
    window.location.assign(url)
  }

  showExcellentOnlineCodingVideo () {
    const {programId, taskId, assignmentId, studentId, history} = this.props
    const commonUrl = `program/${programId}/task/${taskId}/assignment/${assignmentId}/excellent-assignment-video`
    const tutorUrl = `/tutor/program/${programId}/task/${taskId}/student/${studentId}/assignment/${assignmentId}/excellent-assignment-video`

    this.props.isTutor
        ? history.push(tutorUrl)
        : this.props.isInstructor
        ? history.push(`/preview/${commonUrl}`)
        : history.push(`/student/${commonUrl}`)
  }

  render () {
    const {programId, taskId, assignmentId, studentId} = this.props
    const excellentVideo = this.props.excellentVideo
    const review = this.props.review || {}
    const tutor = this.props.isTutor
    const instructor = this.props.isInstructor
    const disable = tutor ? '' : instructor ? '' : review.status && review.status !== '已提交' ? '' : true
    const title = tutor ? '' : instructor ? '' : review.status ? '' : '完成作业才能看呦'
    const quizDefinition = this.props.quizDefinition || {}
    const answerPath = quizDefinition.answerPath

    const isShowExcellentOnlineCoding = tutor || instructor ? 'hidden' : ''
    const isShowExcellentVideo = excellentVideo.videoAddress ? '' : 'hidden'

    const tutorAnswer = `/tutor/program/${programId}/task/${taskId}/student/${studentId}/assignment/${assignmentId}/quizzes/${quizDefinition.id}/onlineCoding-answer`
    const commonUrl = `program/${programId}/task/${taskId}/assignment/${assignmentId}/quizzes/${quizDefinition.id}/onlineCoding-answer`

    const studentAnswer = `/student/${commonUrl}`
    const instructorAnswer = `/preview/${commonUrl}`

    const url = tutor ? tutorAnswer : instructor ? instructorAnswer : studentAnswer

    return (<div>
      <Col>
        <div>
          {answerPath
              ? <Tooltip title={title}>
                <Link to={url}><Button disabled={disable}>参考答案</Button></Link>
              </Tooltip> : ''
          }
          <span className={isShowExcellentVideo}>
            <Tooltip title={title}>
              <Button disabled={disable} className={'hidden margin-l-2'} onClick={this.showExcellentOnlineCodingVideo.bind(this)}>高手视频</Button>
            </Tooltip>
          </span>
          <span className={isShowExcellentOnlineCoding}>
            <Tooltip title={title}>
              <Button disabled={disable} className={'margin-l-2'} onClick={this.goExcellentAssignmentList.bind(this)}>优秀作业</Button>
            </Tooltip>
          </span>
        </div>
      </Col>
    </div>
    )
  }
}
const mapStateToProps = ({excellentVideo, settings}) => ({
  excellentVideo,
  settings
})

const mapDispatchToProps = dispatch => ({
  getExcellentOnlineCodingVideo: (taskId, assignmentId) => dispatch(excellentActions.getExcellentOnlineCodingVideo(taskId, assignmentId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ReferenceButtonGroup))
